<template>
  <!-- 弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    :title="props.title"
    width="600px"
    append-to-body
    class="diy-dialog"
    @close="closeDialog"
  >
    <el-form
      ref="userFormRef"
      :model="formData"
      :rules="rules"
      label-width="80px"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username" placeholder="请输入用户名" />
        <!-- :readonly="!!formData.id" -->
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <dictionary v-model="formData.gender" type-code="gender" />
      </el-form-item>
      <el-form-item label="手机号码" prop="mobile">
        <el-input
          v-model="formData.mobile"
          placeholder="请输入手机号码"
          maxlength="11"
        />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input
          v-model="formData.email"
          placeholder="请输入邮箱"
          maxlength="50"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <!-- 弹窗底部操作按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<!-- 用户管理 -->
<script setup lang="ts">
import { getUserForm, addUser, updateUser } from '@/api/user'
import { UserForm } from '@/api/user/types'

defineOptions({
  name: 'User',
  inheritAttrs: false
})

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  id: {
    type: Number,
    default: 0
  },
  type: {
    type: String,
    // add-新增 update-更新
    default: 'add'
  }
})
const emit = defineEmits(['update:visible', 'handleQuery'])
const dialogVisible = useVModel(props, 'visible', emit)
const globalRules: any = inject('rules')
const userFormRef = ref(ElForm)
const loading = ref(false) //  加载状态
// 用户表单数据
const formData = reactive<UserForm>({
  status: 1
})

// 校验规则
const rules = reactive({
  username: globalRules.username(),
  email: globalRules.email(),
  mobile: globalRules.mobile()
})

watch(
  () => props.id,
  (nv, ov) => {
    if (nv) {
      formData.id = nv
      handleQuery()
    }
  },
  {
    immediate: true
  }
)

/** 查询 */
function handleQuery() {
  loading.value = true
  getUserForm(props.id)
    .then(({ data }) => {
      Object.assign(formData, data)
    })
    .finally(() => (loading.value = false))
}

/**
 * 关闭弹窗
 *
 * @param type 弹窗类型  用户表单
 */
function closeDialog() {
  dialogVisible.value = false
  // userFormRef.value.resetFields()
  // userFormRef.value.clearValidate()
  // formData.id = undefined
  // formData.status = 1
}

/** 表单提交 */
const handleSubmit = useThrottleFn(() => {
  userFormRef.value.validate((valid: any) => {
    if (valid) {
      const userId = formData.id
      loading.value = true
      if (userId) {
        updateUser(userId, formData)
          .then(() => {
            ElMessage.success('修改用户成功')
            closeDialog()
            emit('handleQuery')
          })
          .finally(() => (loading.value = false))
      } else {
        addUser(formData)
          .then(() => {
            ElMessage.success('新增用户成功')
            closeDialog()
            emit('handleQuery')
          })
          .finally(() => (loading.value = false))
      }
    }
  })
}, 3000)
</script>

<style lang="scss">
.diy-dialog {
  max-width: 700px;
}
</style>
